<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="author" content="order by dede58.com"/>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>留言 - 简博客管理系统</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="apple-touch-icon-precomposed" href="images/icon/icon.jpg">
<link rel="shortcut icon" href="images/icon/icon.jpg">
<script src="js/jquery-2.1.4.min.js"></script>
<!--[if gte IE 9]>
  <script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
  <script src="js/html5shiv.min.js" type="text/javascript"></script>
  <script src="js/respond.min.js" type="text/javascript"></script>
  <script src="js/selectivizr-min.js" type="text/javascript"></script>
<![endif]-->
<!--[if lt IE 9]>
  <script>window.location.href='upgrade-browser.html';</script>
<![endif]-->
</head>

<body class="user-select">
<section class="container-fluid">
  <header>
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">切换导航</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
          <a class="navbar-brand" href="/">简博客</a> </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">admin <span class="caret"></span></a>
              <ul class="dropdown-menu dropdown-menu-left">
                <li><a title="查看或修改个人信息" data-toggle="modal" data-target="#seeUserInfo">个人信息</a></li>
                <li><a title="查看您的登录记录" data-toggle="modal" data-target="#seeUserLoginlog">登录记录</a></li>
              </ul>
            </li>
            <li><a href="/Index/outLogin" onClick="if(!confirm('是否确认退出？'))return false;">退出登录</a></li>
            <li><a data-toggle="modal" data-target="#WeChat">帮助</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </header>
  <div class="row">
   <aside class="col-sm-3 col-md-2 col-lg-2 sidebar">
      <ul class="nav nav-sidebar">
        <li><a href="main.html">报告</a></li>
      </ul>
      <ul class="nav nav-sidebar">
        <li><a href="http://localhost:63342/springboot-blogweb/article.html">文章</a></li>
        <li><a href="http://localhost:63342/springboot-blogweb/notice.html">公告</a></li>
        <li><a href="http://localhost:63342/springboot-blogweb/comment.html">评论</a></li>
        <li class="active"><a href="readermsg.html">留言</a></li>
      </ul>
      <ul class="nav nav-sidebar">
        <li><a href="category.html">栏目</a></li>
        <li><a class="dropdown-toggle" id="otherMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">其他</a>
          <ul class="dropdown-menu" aria-labelledby="otherMenu">
            <li><a href="user-group.html">友情链接</a></li>
            <li><a href="loginlog.html">访问记录</a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav nav-sidebar">
        <li><a class="dropdown-toggle" id="userMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">用户</a>
          <ul class="dropdown-menu" aria-labelledby="userMenu">
            <li><a href="user-group.html">管理用户组</a></li>
            <li><a href="manage-user.html">管理用户</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="http://localhost:63342/springboot-blogweb/loginlog.html">管理登录日志</a></li>
            <li><a href="http://localhost:63342/springboot-blogweb/optionlog.html">管理操作日志</a></li>
          </ul>
        </li>
        <li><a class="dropdown-toggle" id="settingMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">设置</a>
          <ul class="dropdown-menu" aria-labelledby="settingMenu">
            <li><a href="setting.html">基本设置</a></li>
            <li><a href="readset.html">用户设置</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="safety.html">安全配置</a></li>
            <li role="separator" class="divider"></li>
            <li class="disabled"><a>扩展菜单</a></li>
          </ul>
        </li>
      </ul>
    </aside>
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-lg-10 col-md-offset-2 main" id="main">
      <form action="/Article/checkAll" method="post" >
        <h4 class="page-header">留言管理</h4>
        <button class="btn btn-primary btn-sm edit_btn" id="excelOut" type="button">导出</button>
        <div class="table-responsive">
          <table class="table table-striped table-hover">
            <thead>
              <tr>
                <th><span class="glyphicon glyphicon-th-large"></span> <span class="visible-lg">序号</span></th>
                <th><span class="glyphicon glyphicon-file"></span> <span class="visible-lg">姓名</span></th>
                <th><span class="glyphicon glyphicon-file"></span> <span class="visible-lg">标题</span></th>
                <th><span class="glyphicon glyphicon-list"></span> <span class="visible-lg">内容</span></th>
                <th class="hidden-sm"><span class="glyphicon glyphicon-tag"></span> <span class="visible-lg">邮箱</span></th>
                <th><span class="glyphicon glyphicon-time"></span> <span class="visible-lg">日期</span></th>
                <th><span class="glyphicon glyphicon-pencil"></span> <span class="visible-lg">操作</span></th>
              </tr>
            </thead>
            <tbody id="container">

            </tbody>
          </table>
        </div>
        <footer class="message_footer">
            <!--显示分页信息 -->
		    <div class="row">
		        <!--分页文字信息 -->
		        <div class="col-md-6 col-sm-6" id="page_info_area">
		            当前第页，总共页，总共条记录
		        </div>
		        <!--分页导航条信息 -->
		        <div class="col-md-6 col-sm-6" id="page_nav_area">

		        </div>
		    </div>
        </footer>
      </form>
    </div>
  </div>
</section>
<!--个人信息模态框-->
<div class="modal fade" id="seeUserInfo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <form action="" method="post">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" >个人信息</h4>
        </div>
        <div class="modal-body">
          <table class="table" style="margin-bottom:0px;">
            <thead>
              <tr> </tr>
            </thead>
            <tbody>
              <tr>
                <td wdith="20%">姓名:</td>
                <td width="80%"><input type="text" value="王雨" class="form-control" name="truename" maxlength="10" autocomplete="off" /></td>
              </tr>
              <tr>
                <td wdith="20%">确认密码:</td>
                <td width="80%"><input type="password" class="form-control" name="new_password" maxlength="18" autocomplete="off" /></td>
              </tr>
            </tbody>
            <tfoot>
              <tr></tr>
            </tfoot>
          </table>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-primary">提交</button>
        </div>
      </div>
    </form>
  </div>
</div>

<script src="js/bootstrap.min.js"></script> 
<script src="js/admin-scripts.js"></script> 
<script>

/**
 * 定义全局contents数组信息
 * 把返回的data数据都放入这个数据，然后在遍历数组
 */
var readermsgList = [];

//发送ajax请求，获取contents信息
$(function(){

	var totalRecord,currentPage;
	to_page(1)
     /**
     * 1.显示所有数据
     * @param pn
     */
    function to_page(pageNum) {
        $.ajax({
            url:"http://localhost:8081/admin/getAllMsg",
            type:"GET",
            xhrFields:{
              widthCredentials:true
            },
            crossDomain:true,
            data:{
            	"pageNum": pageNum
            },
            success:function (result) {
                if (0 == result.code){
                   readermsgList = result.data.list;
                   //执行列表函数，遍历数组
                   reloadDom();

	                //2.解析并显示分页信息
	            	  build_page_info(result);

                   //解析并显示分页条数据
                   build_page_nav(result);
                }
            }
        });
    }


	/**
	 * contents列表浏览
	 * 遍历数组，append到tbody中
	 * 之后给每行添加id，方便获取每个content的详情信息
	 */
	function reloadDom(){
		$("#container").empty();
	    for (var i=0; i<readermsgList.length; i++) {
	        var readermsDo = readermsgList[i];
	        var dom = "<tr data-id='"+readermsDo.id+"'><td>"+readermsDo.id+"</td>\n" +
	        	"<td>"+readermsDo.name+"</td>\n" +
	            "<td>"+readermsDo.title+"</td>\n" +
	            "<td>"+readermsDo.content+"</td>\n" +
	            "<td>"+readermsDo.email+"</td>\n" +
	            "<td>"+readermsDo.created+"</td>\n" +
	            "<td><input class='btn btn-primary btn-sm edit_btn' type='button' id='contentItem"+readermsDo.id+"' value='详情'></td></tr>";
	            //添加到tbody容器中
	        $("#container").append($(dom));
	        /**
	         * 给修改绑定一个点击事件，点击并传递id参数，跳转至content修改页面并根据id查询，之后获取id在在修改
	         * @param  {String} ) {                       window.location.href [description]
	         * @return {[type]}   [description]
	         */
	        $("#contentItem"+readermsDo.id).click(function () {
	          var id=$(this).parents("tr").find("td:eq(0)").text();
	          window.location.href="readermsgInfo.html?id="+id;
	        })

	    }
	}

	/**
	 * 解析显示分页信息
	 * @param data
	 */
	function build_page_info(result) {
	    $("#page_info_area").empty();
	    $("#page_info_area").append("当前" + result.data.pageNum + "页,总共" + result.data.pages +
	        "页，总共" + result.data.total + "条记录");
	    totalRecord = result.data.total;
	    currentPage = result.data.pageNum;
	}


	/**
	 * 解析显示分页导航条
	 * @param data
	 */
	function build_page_nav(result) {
	    $("#page_nav_area").empty();
	    var ul = $("<ul></ul>").addClass("pagination");
	    var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href", "#"));
	    var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;").attr("href", "#"));
	    var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;").attr("href", "#"));
	    var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href", "#"));
	    //如果没有前一页，前一页和首页就不能点
	    if (result.data.hasPreviousPage == false) {
	        firstPageLi.addClass("disabled");
	        prePageLi.addClass("disabled");
	    } else {
	        //首页
	        firstPageLi.click(function () {
	            to_page(1);
	        });
	        prePageLi.click(function () {
	            to_page(result.data.pageNum - 1);
	        });
	    }
	    if (result.data.hasNextPage == false) {
	        nextPageLi.addClass("disabled");
	        lastPageLi.addClass("disabled");
	    } else {
	        //构建点击事件
	        nextPageLi.click(function () {
	            to_page(result.data.pageNum + 1);
	        });
	        lastPageLi.click(function () {
	            to_page(result.data.lastPage);
	        })
	    }
	    //添加首页和前一页
	    ul.append(firstPageLi).append(prePageLi);
	    //遍历添加页码
	    $.each(result.data.navigatepageNums, function (index, item) {
	        var numLi = $("<li></li>").append($("<a></a>").append(item).attr("href", "#"));
	        //如果是当前选中页面，添加active标识
	        if (result.data.pageNum == item) {
	            numLi.addClass("active");
	        }
	        //给每个页码添加点击就跳转
	        numLi.click(function () {
	            to_page(item);
	        });
	        ul.append(numLi);
	    });
	    //添加下一页和末页
	    ul.append(nextPageLi).append(lastPageLi);
	    var navEle = $("<nav></nav>").append(ul);
	    navEle.appendTo("#page_nav_area");
	}

	/**
	 * 导出至Excel表单
	 */
	$("#excelOut").on("click",function(){
		$.ajax({
	        url:"http://localhost:8081/admin/excelOut",
	        type:"GET",
	        success:function (result) {
	            if (0 == result.code){
	              alert("导出成功，请至桌面查看")
	            }
	        }
	    });
	})
});
</script>
</body>
</html>
